import { ColumnProps } from 'antd/lib/table';

import { Row, Spin, Table, Button, Popconfirm, Badge } from 'antd';

import React from 'react';
import { BrandTableContext } from '../index';
import { ProductAttributeCategory } from '@/models/productAttributeCategory';
import { Link } from 'umi';

const columns: ColumnProps<ProductAttributeCategory>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '属性分类',
    dataIndex: 'name',
    align: 'center',
    width: '450px',
  },
  {
    title: '设置',
    key: 'options',
    align: 'center',
    render: (_text, record) => (
      <div>
        <Badge count={record.attributeCount}>
          <Button>
            <Link to={`/product/attribute/list?categoryId=${record.id}&type=0`}>规格列表</Link>
          </Button>
        </Badge>
        <Badge count={record.paramCount}>
          <Button>
            <Link to={`/product/attribute/list?categoryId=${record.id}&type=1`}>参数列表</Link>
          </Button>
        </Badge>
      </div>
    ),
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    render: (_text, record) => (
      <BrandTableContext.Consumer>
        {table => (
          <div className="horizon-button-group">
            <Button type="primary">
              <Link to={`/product/attribute/add?categoryId=${record.id}`}>新增</Link>
            </Button>
            {/* <Button onClick={() => table.onRowEdit(record.id)}>编辑</Button> */}
            <Popconfirm
              title="确定删除吗？"
              onConfirm={() => {
                table.onRowDelete(record.id);
              }}
            >
              <Button type="danger">删除</Button>
            </Popconfirm>
          </div>
        )}
      </BrandTableContext.Consumer>
    ),
  },
];

export interface CategoryTableProps {
  categories: ProductAttributeCategory[];
  loading?: boolean;
}

export default (props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<ProductAttributeCategory>
        dataSource={props.categories}
        columns={columns}
        rowKey="id"
        bordered
      />
    </Spin>
  </Row>
)) as React.FC<CategoryTableProps>;
